<template>
  <div class="addgoods">
      <group gutter="10px">
        <popup-picker @on-change="selected" title="全部分类" :data="catelist" :columns="3" v-model="cate_id" show-name></popup-picker>
      </group>
      <search @on-change="search" @on-cancel="reset" v-model="searchvalue" ref="search" placeholder="请输入关键字" position="absolute" style="margin-top:10px" :autoFixed="false"/>
      <scroller class="scroll">
        <div class="goodslist">
          <goods-item v-for="item in goodslist" title="上架规格" :item="item" :key="item.goods_id">
            <x-button :link="{name:'addtomygoods',params:{goods_id:item.goods_id,action:'add'}}" mini type="warn">添加到我的货架</x-button>
          </goods-item>
        </div>
      </scroller>
  </div>
</template>
<script>
import GoodsItem from "@/components/GoodsItem";
import { XButton, Flexbox, FlexboxItem, PopupPicker, Group, Search } from "vux";
export default {
  name: "addgoods",
  data() {
    return {
      cate_id: [],
      searchvalue: "",
      goodslist: [],
      catelist: []
    };
  },
  components: {
    GoodsItem,
    XButton,
    Flexbox,
    FlexboxItem,
    PopupPicker,
    Group,
    Search
  },
  methods: {
    selected(v) {
      if (v.length == 3) {
        this.searchvalue = "";
        this.$http
          .get("/api/supplier.shop_goods/index", {
            params: {
              cate_id: v[2]
            }
          })
          .then(res => {
            this.goodslist = res.data.data.list;
          });
      }
    },
    search(v) {
      if (this.cate_id.length == 3) {
        this.cate_id = [];
      }
      this.$http
        .get("/api/supplier.shop_goods/index", {
          params: {
            keyword: v
          }
        })
        .then(res => {
          this.goodslist = res.data.data.list;
        });
    },
    reset() {
      if(this.searchvalue==''){
        return
      }
      this.searchvalue = ''
      this.$http.get("/api/supplier.shop_goods/index").then(res => {
        this.goodslist = res.data.data.list;
      });
    }
  },
  created() {
    this.$http.post("/api/supplier.goods_cate/all_index").then(res => {
      this.catelist = res.data.data;
    });
    this.$http.get("/api/supplier.shop_goods/index").then(res => {
      this.goodslist = res.data.data.list;
    });
  }
};
</script>
<style scoped lang="less">
.addgoods {
  .scroll {
    top: 108px;
    bottom: 0;
    height: auto !important;
  }
  .goodslist {
    padding-bottom: 10px;
  }
  button {
    width: 100%;
    font-size: 16px;
    background-color: #e6a23c;
  }
  button:active {
    background-color: rgb(221, 157, 74);
  }
}
</style>